<style scoped>
page {
	min-height: 100%;
	width: 100%;
}
.page{
	padding: 30rpx 28rpx;
}
.uni-swiper{
	max-height: 130px !important;
}
.banner image{
    width: 100%;
	max-height: 130px !important;
}
.bf-list{
    padding: 15px 20px;
}
.left-icon{
    height: 40rpx;
    width: 40rpx;
}
.btnBox{
	border-radius: 12rpx;
}
.btnBox .btnIcon{
	height: 60rpx;
	width: 60rpx;
	border-radius: 30rpx;
	overflow: hidden;
}
.imgPic{
	border-radius: 10rpx;
}
.imgList{
	height: 38rpx;
	width: 38rpx;
}
.topLine{
	/* height: 80rpx;
	line-height: 80rpx; */
	padding: 12rpx 24rpx 12rpx 24rpx;
}
.interLine{
	/* height: 80rpx;
	line-height: 80rpx; */
}
</style>
<template>
    <view class="page bac-color-efeff4">
		<view class="flex align-center justify-between">
			<navigator class="flex align-center bac-color-normal flex-1 btnBox over-hid"
				url="/pages/social/home_apply"
				open-type="navigate"
				hover-class="none" >
				<image class="w-100" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/1f483f7e-d546-4b72-a3c8-2281e346f234.png" mode="widthFix"></image>
				<!-- <image class="btnIcon" src="../../static/htz-rate/rate1_0.png" mode=""></image>
				<view class="flex flex-column justify-around font-color-fff mar-l-3 letter-s">
					<text class="font-size-15">帮扶申请</text>
					<text class="font-size-12 tq-text-line1">私人订制-精准帮扶</text>
				</view> -->
			</navigator>
			<navigator class="flex align-center bac-color-orange flex-1 mar-l-15 btnBox over-hid"
				url="/pages/social/myhelp"
				open-type="navigate"
				hover-class="none">
				<image class="w-100" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/94c6a0fa-d569-44e0-84af-877143d63f67.png" mode="widthFix"></image>
				<!-- <image class="btnIcon" src="../../static/htz-rate/rate1_0.png" mode=""></image>
				<view class="flex flex-column justify-around font-color-fff mar-l-3 letter-s">
					<text class="font-size-15">我的记录</text>
					<text class="font-size-12 tq-text-line1">助人自助、扶志扶智</text>
				</view> -->
			</navigator>
		</view>
		<image class="imgPic w-100 mar-t-15"
			src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/c863da3f-19ff-4045-833c-2548f8fc4251.png" mode="widthFix"
			lazy-load='true' @click="href('/pages/social/helpDetail')"></image>
		<view class="flex align-center justify-between topLine mar-t-10">
			<view class="flex align-center interLine">
				<image class="imgList" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/e7d3f434-0d39-4daf-a07d-61cb718c1146.png" mode=""></image>
				<text class="font-size-15 font-bold font-color-333 mar-l-5 tq-text-line1">我已申请帮扶，期待"彩虹之约"</text>
			</view>
			<text class="iconfont icon-more font-color-green font-size-12 pad-l-10 pad-r-10 interLine" @click="href('/pages/social/detailList')"></text>
		</view>
		<view class="flex flex-column bac-color-fff pad-t-10" style="height: 260px;overflow: hidden;border-radius: 10rpx;">
			<view class="over-hid pad-b-10 pos-rel">
				<view class="maskTop" v-if="isShowMask"></view>
				<view class="maskBottom" v-if="isShowMask"></view>
				<vueSeamlessScroll2 :scrollList="child"></vueSeamlessScroll2>
			</view>
			<view style="height: 20rpx;flex: 0 0 20rpx;" class="w-100 bac-color-fff"></view>
		</view>
		<view class="flex align-center justify-between topLine mar-t-10">
			<view class="flex align-center interLine">
				<image class="imgList" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/729bc921-20f7-4aa7-923a-a28001ec5bb8.png" mode=""></image>
				<text class="font-size-15 font-bold font-color-333 mar-l-5 tq-text-line1">欢迎加入"爱心帮帮团"赴一场"彩虹之约"</text>
			</view>
			<text class="iconfont icon-more font-color-green font-size-12 pad-l-10 pad-r-10 interLine" @click="href('/pages/social/detailListVolunteer')"></text>
		</view>
		<view class="flex flex-column bac-color-fff pad-t-10" style="height: 260px;overflow: hidden;border-radius: 10rpx;">
			<view class="over-hid pad-b-10 pos-rel">
				<view class="maskTop" v-if="isShowMask"></view>
				<view class="maskBottom" v-if="isShowMask"></view>
				<vueSeamlessScroll :scrollList="volunteer"></vueSeamlessScroll>
			</view>
			<view style="height: 20rpx;flex: 0 0 20rpx;" class="w-100 bac-color-fff"></view>
		</view>
		
    </view>
</template>

<script>
import {evaluatesList,getBanners,socialHome} from '@/utils/http'
// import scrollData from '@/components/scroll-data.vue'
import vueSeamlessScroll from "@/components/vue-seamless-scroll.vue";
import vueSeamlessScroll2 from "@/components/vue-seamless-scroll2.vue";

export default {
    components:{
        // scrollData,
		vueSeamlessScroll,
		vueSeamlessScroll2
    },
    data() {
        return {
			tab_list:[{
				id:0,
				name:'儿童列表'
			}, {
				id:1,
				name:'爱心帮帮团'
			}],
			tabIndex:0,
			scrollList:[{
				avatar:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/550dcd82-08c7-41a5-a48e-a1d33f1c23da.png',
				name:'麒麟队长',
				sex:'男',
				address:'苍南县灵溪镇人民路1001号',
				status:'2'
			},{
				avatar:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/550dcd82-08c7-41a5-a48e-a1d33f1c23da.png',
				name:'帮扶队长',
				sex:'女',
				address:'苍南县灵溪镇人民路1001号',
				status:'1'
			},{
				avatar:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/550dcd82-08c7-41a5-a48e-a1d33f1c23da.png',
				name:'盘古队长',
				sex:'男',
				address:'苍南县灵溪镇人民路1001号',
				status:'1'
			},{
				avatar:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/550dcd82-08c7-41a5-a48e-a1d33f1c23da.png',
				name:'1队长',
				sex:'女',
				address:'苍南县灵溪镇人民路1001号',
				status:'2'
			},{
				avatar:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/550dcd82-08c7-41a5-a48e-a1d33f1c23da.png',
				name:'2队长',
				sex:'男',
				address:'苍南县灵溪镇人民路1001号',
				status:'2'
			},{
				avatar:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/550dcd82-08c7-41a5-a48e-a1d33f1c23da.png',
				name:'3队长',
				sex:'女',
				address:'苍南县灵溪镇人民路1001号',
				status:'2'
			}],
			child:[],
			volunteer:[],
			isShowMask:true
        }
    },
    onLoad(){
		const sUserAgent = window.navigator.userAgent.toLowerCase()
		console.log('sUserAgent',sUserAgent)
		if(sUserAgent.indexOf('iphone')>-1){
			this.isShowMask = false
		}
        this.socialHome();
		this.bus.$on('refreshList',()=>{
			this.socialHome();
		})
    },
	onUnload() {
		this.bus.$off('refreshList')
	},
    methods: {
		
		socialHome() {
			const params = {
			}
			socialHome(params).then(res => {
				console.log(res,'socialHome')
				this.child = res.home.data
				this.volunteer = res.pub.data
			})
		},
		previewImage(banners,index) {
			uni.previewImage({
				urls:this.bannerImgs,
				current:index,
				loop:true
			})
		},
    }
}
</script>
